<template>
  <div style="background-color: #ffffff;padding: 24px">
    <div style="margin:0 auto">
      <span style="line-height: 30px;font-size: 20px;margin-right: 12px;">地址库管理</span>
      <span style="margin-right: 30px;font-size: 12px">用来保存自己的发货、退货地址，最多可添加50条；买家退换货等售后问题联系方式，填写错误造成损失由卖家承担！</span>
      <div style="margin-bottom: 16px;margin-top: 12px">
        <a-button type="primary" @click="addModalShow = !addModalShow">新建地址</a-button>
      </div>
      <a-table :columns="columns" :data-source="data">
        <span slot="sendDefault" slot-scope="text, record">
          <span v-if="record.sendDefault == '01'">是</span>
          <span v-else>否</span>
        </span>

        <span slot="refundDefault" slot-scope="text, record">
          <span v-if="record.refundDefault == '01'">是</span>
          <span v-else>否</span>
        </span>

        <span slot="address" slot-scope="text, record">
          {{ record.connectAddress }} - {{ record.connectAddressDetail }}
        </span>

        <span slot="action" slot-scope="text, record">
          <a-dropdown>
            <a class="ant-dropdown-link" @click="e => e.preventDefault()">操作 </a>
            <template v-slot:overlay>
              <a-menu>
                <a-menu-item>
                  <a @click="handleDelete(record)">删除</a>
                </a-menu-item>
                <a-menu-item>
                  <a @click="handleUpd(record)">修改</a>
                </a-menu-item>
                <a-menu-item>
                  <a @click="handleSendDefault(record)">发货默认</a>
                </a-menu-item>
                <a-menu-item>
                  <a @click="handleRefundDefault(record)">退货默认</a>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </span>
      </a-table>
    </div>
    <a-modal
      title="新建地址"
      :width="600"
      :visible="addModalShow"
      :closable="false"
      @ok="handleAddAddress"
      @cancel="addModalShow = !addModalShow">
      <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
        <a-form-item label="联系人">
          <a-input v-model="addForm.connectName" :style="{width:'400px',borderRadius:'4px'}" placeholder="请输入联系人"/>
        </a-form-item>
        <a-form-item label="联系人电话">
          <a-input v-model="addForm.connectTel" :style="{width:'400px',borderRadius:'4px'}" placeholder="请输入联系人电话"/>
        </a-form-item>
        <a-form-item label="地址信息">
          <Cascader
            v-model="addForm.connectAddressArray"
            :options="options"
            :style="{width:'400px',borderRadius:'4px'}"
            placeholder="请输入地址信息"/>
        </a-form-item>
        <a-form-item label="详细地址">
          <a-input
            v-model="addForm.connectAddressDetail"
            :style="{width:'400px',borderRadius:'4px'}"
            placeholder="请输入详细地址"/>
        </a-form-item>
      </a-form>
    </a-modal>

    <a-modal
      title="修改地址"
      :width="600"
      :visible="updModalShow"
      :closable="false"
      @ok="handleUpdAddress"
      @cancel="updModalShow = !updModalShow">
      <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
        <a-form-item label="联系人">
          <a-input v-model="updForm.connectName" :style="{width:'500px',borderRadius:'4px'}" placeholder="请输入联系人"/>
        </a-form-item>
        <a-form-item label="联系人电话">
          <a-input v-model="updForm.connectTel" :style="{width:'500px',borderRadius:'4px'}" placeholder="请输入联系人电话"/>
        </a-form-item>
        <a-form-item label="地址信息">
          <Cascader
            v-model="updForm.connectAddressArray"
            :options="options"
            :style="{width:'500px',borderRadius:'4px'}"
            placeholder="请输入地址信息"/>
        </a-form-item>
        <a-form-item label="详细地址">
          <a-input
            v-model="updForm.connectAddressDetail"
            :style="{width:'500px',borderRadius:'4px'}"
            placeholder="请输入详细地址"/>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
  import { Cascader } from 'ant-design-vue'
  import { addAddress, queryAddress, deleteAddress, updateAddress } from '@/api/addr'

  const options = [
    {
      value: '直辖市',
      label: '直辖市',
      children: [
        { value: '北京', label: '北京' },
        { value: '上海', label: '上海' },
        { value: '天津', label: '天津' },
        { value: '重庆', label: '重庆' }
      ]
    },
    {
      value: '江苏',
      label: '江苏',
      children: [
        { value: '南京', label: '南京' },
        { value: '苏州', label: '苏州' },
        { value: '无锡', label: '无锡' },
        { value: '常州', label: '常州' },
        { value: '徐州', label: '徐州' },
        { value: '扬州', label: '扬州' },
        { value: '南通', label: '南通' },
        { value: '盐城', label: '盐城' },
        { value: '泰州', label: '泰州' },
        { value: '镇江', label: '镇江' },
        { value: '淮安', label: '淮安' },
        { value: '宿迁', label: '宿迁' },
        { value: '连云港', label: '连云港' }
      ]
    }
  ]

  const columns = [
    {
      title: '发货默认',
      key: 'sendDefault',
      scopedSlots: { customRender: 'sendDefault' }
    },
    {
      title: '退货默认',
      key: 'refundDefault',
      scopedSlots: { customRender: 'refundDefault' }
    },
    {
      title: '联系人',
      dataIndex: 'connectName',
      key: 'connectName'
    },
    {
      title: '联系电话',
      dataIndex: 'connectTel',
      key: 'connectTel'
    },
    {
      title: '详细地址',
      key: 'address',
      scopedSlots: { customRender: 'address' }
    },
    {
      title: '操作',
      key: 'action',
      scopedSlots: { customRender: 'action' }
    }
  ]

  export default {
    name: 'ManageAddress',
    components: {
      Cascader
    },
    data () {
      return {
        addModalShow: false,
        columns,
        options,
        data: [],
        addForm: {
          connectName: '',
          connectTel: '',
          connectAddressArray: [],
          connectAddress: '',
          connectAddressDetail: ''
        },

        updModalShow: false,
        updForm: {
          addrNo: '',
          sendDefault: '',
          refundDefault: '',
          connectName: '',
          connectTel: '',
          connectAddressArray: [],
          connectAddress: '',
          connectAddressDetail: ''
        }
      }
    },
    methods: {
      handleAddAddress () {
        this.addForm.connectAddress = this.addForm.connectAddressArray[0]
        addAddress(this.addForm).then(rsp => {
          this.addModalShow = !this.addModalShow
          this.addForm = {}
          this.data.splice(0, 0, rsp)
        })
      },
      handleDelete (record) {
        deleteAddress({ addrNo: record.addrNo }).then(rsp => {
          queryAddress().then(rsp => {
            this.data = rsp
          })
        })
      },
      handleUpd (record) {
        this.updForm = record
        this.updForm.connectAddressArray = [this.updForm.connectAddress]
        this.updModalShow = !this.updModalShow
      },
      handleUpdAddress () {
        this.updForm.connectAddress = this.updForm.connectAddressArray[0]

        updateAddress(this.updForm).then(rsp => {
          this.updModalShow = !this.updModalShow
          queryAddress().then(rsp => {
            this.data = rsp
          })
        })
      },
      handleSendDefault (record) {
        record.sendDefault = '01'
        updateAddress(record).then(rsp => {
          queryAddress().then(rsp => {
            this.data = rsp
          })
        })
      },
      handleRefundDefault (record) {
        record.refundDefault = '01'
        updateAddress(record).then(rsp => {
          queryAddress().then(rsp => {
            this.data = rsp
          })
        })
      }
    },
    mounted () {
      queryAddress().then(rsp => {
        this.data = rsp
      })
    }
  }
</script>

<style scoped>

</style>
